import React, { Component } from 'react'
import Head from '../head/head.jsx'
import { MinusOutlined, PlusOutlined } from '@ant-design/icons'
import './cart.scss'
import i1 from '../../../img2/01.png'
import i2 from '../../../img2/02.png'
import q2 from '../../../img2/lglife.png'
import axios from '../../../axios/axios'
import cartMethod from '../../../publicMethod.js'
import { message } from 'antd';
import {connect} from 'react-redux';
import {Link } from 'react-router-dom'

import Shoppingcartno from '../../components3/shoppingcart/shop';

class cart extends Component {

    constructor(props) {
        super(props)
        this.state={
            shopingcart:[],
            sumprice:0,
            youmeiyou:false
        }
    }
    componentWillMount(){
        if(localStorage.getItem('user_info')){
            axios.get("small/order/verify/v1/findShoppingCart").then((res) => {
                var cart = res.data.result;
                cart.forEach((v1) => {
                v1.check=false;
                v1.sumprice=0;
                v1.count=0;
                  v1.shoppingCartList.forEach((v2) => {
                    v2.check = false;
                  });
                });
                cartMethod.setShopping(cart);
                this.setState({
                    shopingcart:cart,
                    youmeiyou:cart.length>0?true:false
                })
            //   console.log(cartMethod.shopping);
              });
        }else{
            message.error('你还没登录');
        }
    }
    onChange(e) {
        console.log(`checked = ${e.target.checked}`);
    }
    ch(e) {
        if (e.target.checked) {
            $('.cart-lia input').prop('checked', true);
        } else {
            $('.cart-lia input').prop('checked', false);
        }

    }
    jian(i,ii){
        var arr = this.state.shopingcart;
        arr[i].shoppingCartList[ii].count--;
        if(arr[i].shoppingCartList[ii].count<=0){
            arr[i].shoppingCartList.splice(ii,1);
        }
        if(arr[i].shoppingCartList.length==0){
            arr.splice(i,1);
        }
        this.setState({
            shopingcart:arr
        })
        this.sum();
    }
    jia(i,ii){
        var arr = this.state.shopingcart;
        arr[i].shoppingCartList[ii].count++;
        this.setState({
          shopingcart:arr
      })
        this.sum();
    }
    check(i,ii){
        var arr = this.state.shopingcart;
        arr[i].shoppingCartList[ii].check=!arr[i].shoppingCartList[ii].check;
        arr.forEach((v1) => {
          var checknum = 0;
            //   this.$set(v1,'sumprice',0);
              v1.sumprice=0;
            v1.shoppingCartList.forEach((v2) => {
              if(v2.check==true){
                checknum++;
              v1.sumprice += (v2.price*v2.count);
            //   this.$set(v1,'sumprice',v1.sumprice);
              }
            });
            if(checknum==v1.shoppingCartList.length){
              // v1.check=true;
            //   this.$set(v1,'check',true);
              v1.check=true;
            }else{
            //   this.$set(v1,'check',false);
              v1.check=false;
            }
          });
          
      this.setState({
        shopingcart:arr
    })
          this.sum();
          cartMethod.setShopping(arr);
        //   this.$store.commit("setShopping", this.cart);
          this.updateCart();
    }
    allcheck(i){
        var arr = this.state.shopingcart;
        arr[i].check=!arr[i].check;
        arr[i].shoppingCartList.forEach(v=>{
        v.check=arr[i].check;
      });
      this.setState({
        shopingcart:arr
    })
      this.sum();
    }
    // 同步接口
    updateCart(){
        var arr = cartMethod.updatecartother();
        const params = new FormData();
        var data = JSON.stringify(arr);
        params.append("data", data);
        axios.put('small/order/verify/v1/syncShoppingCart',params).then(res=>{
            // console.log(res);
            message.success(res.data.message);
        });
      }
      sum(){
          var arr = this.state.shopingcart;
        arr.forEach((v1) => {
           v1.count=0;
           v1.sumprice=0
         v1.shoppingCartList.forEach((v2) => {
           if(v2.check==true){
           v1.sumprice += (v2.price*v2.count);
           v1.count +=v2.count;
           }
         });
         cartMethod.setShopping(arr);
 
       });
       this.updateCart();
       this.jisuan();
       this.props.setAction();
     }
     //计算总价
     jisuan(){
         var sum =0;
         cartMethod.shopping.forEach(v=>{
            sum+=v.sumprice;
         })
         this.setState({
             sumprice:sum
         });
     }
    render() {
        return (
            <div>
                <Head  history={this.props.history}/>
                {this.state.youmeiyou?(<div className="cart-body">
            <div className="cart-far">
            <div className="zfcg-top">
                    <img src={q2} alt="" />
                    <div>
                        <span>我的购物车</span>
                        <span>确认订单信息</span>
                        <span>订单提交成功</span>
                    </div>
                </div>
                <div className="cart-son-yi">
                    <img src={i1} alt="" />购物车
                </div>
                <div className="cart-son-er">
                    {
                        this.state.shopingcart.map((v,i) => {
                            return <div key={v.categoryName} className="zuiwai">
                                <div className="p">
                                    <div className="cart-p-l">
                                        <input type="checkbox" checked={v.check} onClick={this.allcheck.bind(this,i)} />
                                        <span>{v.categoryName}</span>
                                    </div>
                                    <div className="cart-p-r">
                                        <span>规格</span>
                                        <span>价格</span>
                                        <span>数量</span>
                                        <span>金额</span>
                                        <span>操作</span>
                                    </div>
                                </div>
                                {/* ul */}
                                <ul className="cart-ul">
                                    {
                                        v.shoppingCartList.map((vv,ii) => {
                                            return <li key={vv.pic}>
                                                <div className="cart-lia">
                                                    <input type="checkbox" checked={vv.check} onClick={this.check.bind(this,i,ii)} />
                                                    <img src={vv.pic} alt="" />
                                                    <span className="commodityName">{vv.commodityName}</span>
                                                </div>
                                                <div className="cart-lib">
                                                    <span>
                                                        <i>版本：国行 32G
                                                            <br />
                                                            颜色:星钻黑
                                                        </i>

                                                    </span>
                                                    <span>{vv.price}.0</span>
                                                    <span>
                                                        <MinusOutlined onClick={this.jian.bind(this,i,ii)} className="sp-jia"/>
                                                        <span className="sp-num">{vv.count}</span>
                                                        <PlusOutlined onClick={this.jia.bind(this,i,ii)} className="sp-jia" />
                                                    </span>
                                                    <span>{vv.count * vv.price}.0</span>
                                                    <span>删除</span>
                                                </div>
                                            </li>

                                        })
                                    }

                                </ul>
                                <div className="cart-tal">
                                    <p>商品金额</p>
                                    <span>￥{v.sumprice}.0</span>
                                </div>


                            </div>

                        })
                    }

                </div>
                <div className="sp-jiesuan">
                    <span className="sp-quan">全选</span>
                    <span className="sp-quan">批量删除</span>
                    <span className="sp-zong">商品总计:<em>￥{this.state.sumprice}.0</em></span>
                    <span className="sp-jie"><Link to="/querendingdan">去结算</Link></span>
                </div>
            </div>
            <div className="sp-ban">
                <p>版权所有 © 2016易和生活港  保留所有权利 | 沪ICP备12042163</p>
                <span>易和生活 纵享品质</span>
            </div>
        </div>):(<Shoppingcartno />)}
            </div>
        
        )
    }
}

const mapDispatchToProps=(dispatch)=>{
    return{
        setAction:()=>{
            dispatch({
                type:'add_action'
            })
        }
    }
}
export default connect(null,mapDispatchToProps)(cart)